<template>
  <div class="main">
    <div class="list">
        <div class="head">
            <div class="choose">
                <input type="checkbox" class="isAll" v-model="isAll" @change="checkAll">
                全部<span class="choosed">(已选{{ selectNum }}件)</span>
            </div>
            <span class="clear" @click="clearAll">🗑清空</span>
        </div>
        <div class="item">
            <ListGoods 
            v-for="item in items" 
            :key="item.id" 
            :item="item"
            @add="add"
            @minus="minus"
            @checkToTrue="toTrue"
            @checkToFalse="toFalse"/>
        </div>
        <div class="settle">
            <ListCollect :items="items"/>
        </div>
    </div>
  </div>
</template>

<script>
import { computed, inject, onMounted, onUpdated, provide, reactive, ref, toRaw, toRefs, watch } from 'vue';
import {useRoute} from 'vue-router'
import ListGoods from '../ShopList/ListGoods.vue'
import ListCollect from '../ShopList/ListCollect.vue'
export default {
    name:'List',
    components:{ ListGoods,ListCollect },
    props:['selectNum'],
    setup(){
        const route = useRoute()
        const id = route.query.id
        //商品列表初步选择的商品
        let items = inject('selectItems')

        //加
        function add(value){
            //获取勾选商品的索引值
            let index = items.value.findIndex((t)=>t.id==value)
            items.value[index].selectSum++
        }
        //减
        function minus(value){
            let index = items.value.findIndex((t)=>t.id==value)
            if(items.value[index].selectSum>0){
                items.value[index].selectSum--
            }
            //减到0了，取消该商品的勾选
            if(items.value[index].selectSum==0){
                items.value[index].select_settle = false
                items.value[index].select = false
            }
        }

        function toTrue(value){
            let index = items.value.findIndex((t)=>t.id==value)
            items.value[index].select_settle = true
        }
        function toFalse(value){
            let index = items.value.findIndex((t)=>t.id==value)
            items.value[index].select_settle = false
        }

        // 购物车里的勾选
        let selectLength = computed(()=>{return items.value.filter((t)=>t.select_settle==true).length})
        let isAll = computed({
            get(){
                return items.value.length === selectLength.value
            },
            set(value){
                isAll = ref(value)
            }
        })

        function checkAll(){
            if(isAll.value){
                items.value.forEach((t)=>t.select_settle=true)
            }else{
                items.value.forEach((t)=>t.select_settle=false)
            }
        }

       

        // 清空购物车
        function clearAll(){
            if(confirm('确定清空购物车？')){
                items.value.forEach((t)=>{
                    t.select = false
                    t.selectSum = 0
                    t.select_settle = false
                })
            }
        }

        return {
            id,items,isAll,add,minus,toTrue,toFalse,checkAll,clearAll
        }
    }
}
</script>

<style scoped>
    .main {
      margin-left: auto;
      margin-right: auto;
      width: 70%;
      border-radius: 8px;
    }
    .list {
        position:fixed;
        bottom: 0;
        width: 70%;
        height: 80%;
        border-radius: 10px;
        background-color: rgb(255, 172, 172);
    }
    .head {
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items:end;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .item {
        position:fixed;
        bottom: 0;
        width: 70%;
        height: 70%;
        background-color: #409EFF;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 15px; 
    }
    .clear,.choosed{
        color: rgb(107, 107, 107);
    }
    .choosed {
        font-size: 12px;
        margin-left: 5px;
    }
    .settle {
        margin-left: auto;
        margin-right: auto;
        position: fixed;
        bottom: 0;
        width: 70%;
        height: auto;
    }
</style>